<template>
  <div class="app-container">
    <!-- 页面头部 -->
    <div class="head-container">
      <div v-if="crud.props.searchToggle">
        <el-input
          v-model="query.countryCode2"
          clearable
          size="small"
          style="width: 200px"
          placeholder="请输入两字母代码"
          class="filter-item"
          @keyup.enter.native="crud.toQuery"
        />
        <el-input
          v-model="query.countryCode3"
          clearable
          size="small"
          style="width: 200px"
          placeholder="请输入三字母代码"
          class="filter-item"
          @keyup.enter.native="crud.toQuery"
        />
        <el-input
          v-model="query.countryCodeNum"
          clearable
          size="small"
          style="width: 200px"
          placeholder="请输入数字代码"
          class="filter-item"
          @keyup.enter.native="crud.toQuery"
        />
        <el-input
          v-model="query.countryNameCh"
          clearable
          size="small"
          style="width: 200px"
          placeholder="请输入中文简称"
          class="filter-item"
          @keyup.enter.native="crud.toQuery"
        />
        <el-input
          v-model="query.countryShortName"
          clearable
          size="small"
          style="width: 200px"
          placeholder="请输入英文简称"
          class="filter-item"
          @keyup.enter.native="crud.toQuery"
        />
        <el-date-picker
          v-model="query.createTime"
          :default-time="['00:00:00','23:59:59']"
          type="daterange"
          range-separator=":"
          size="small"
          class="date-item"
          value-format="yyyy-MM-dd HH:mm:ss"
          start-placeholder="创建日期起"
          end-placeholder="创建日期止"
        />
        <rr-operation :crud="crud" />
      </div>
      <crud-operation :permission="permission">
        <el-upload
          slot="right2"
          :action="countryCodeUploadApi"
          :show-file-list="false"
          :before-upload="beforeUpload"
          :on-success="uploadSuccess"
          :on-error="uploadError"
        >
          <el-button
            v-permission="['admin', 'countryCode:upload']"
            class="filter-item"
            type="primary"
            icon="el-icon-upload"
            size="mini"
          >
            上传
          </el-button>
        </el-upload>
      </crud-operation>
    </div>
    <!-- 表单渲染 -->
    <el-dialog append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title" width="600px">
      <el-form ref="form" :model="form" :rules="rules" size="small" label-width="100px">
        <el-form-item label="两字母代码" prop="countryCode2">
          <el-input v-model="form.countryCode2" style="width: 400px;" />
        </el-form-item>
        <el-form-item label="三字母代码" prop="countryCode3">
          <el-input v-model="form.countryCode3" style="width: 400px;" />
        </el-form-item>
        <el-form-item label="数字代码" prop="countryCodeNum">
          <el-input v-model="form.countryCodeNum" style="width: 400px;" />
        </el-form-item>
        <el-form-item label="中文简称" prop="countryNameCh">
          <el-input v-model="form.countryNameCh" style="width: 400px;" />
        </el-form-item>
        <el-form-item label="英文简称" prop="countryShortName">
          <el-input v-model="form.countryShortName" style="width: 400px;" />
        </el-form-item>
        <el-form-item label="英文全称" prop="countryNameEn">
          <el-input v-model="form.countryNameEn" style="width: 400px;" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="text" @click="crud.cancelCU">取消</el-button>
        <el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
      </div>
    </el-dialog>
    <!-- 数据展现 -->
    <el-table ref="table" v-loading="crud.loading" :data="crud.data" style="width: 100%;" @selection-change="crud.selectionChangeHandler">
      <el-table-column type="selection" width="55" />
      <el-table-column v-if="columns.visible('countryCode2')" :show-overflow-tooltip="true" prop="countryCode2" label="两字母代码" />
      <el-table-column v-if="columns.visible('countryCode3')" :show-overflow-tooltip="true" prop="countryCode3" label="三字母代码" />
      <el-table-column v-if="columns.visible('countryCodeNum')" :show-overflow-tooltip="true" prop="countryCodeNum" label="数据代码" />
      <el-table-column v-if="columns.visible('countryNameCh')" :show-overflow-tooltip="true" prop="countryNameCh" label="中文简称" />
      <el-table-column v-if="columns.visible('countryShortName')" :show-overflow-tooltip="true" prop="countryShortName" label="英文简称" />
      <el-table-column v-if="columns.visible('countryNameEn')" :show-overflow-tooltip="true" prop="countryNameEn" label="英文全称" />
      <el-table-column v-if="columns.visible('createUser')" :show-overflow-tooltip="true" prop="createUser" label="创建人" />
      <el-table-column v-if="columns.visible('createTime')" :show-overflow-tooltip="true" prop="createTime" label="创建时间">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column v-if="columns.visible('updateUser')" :show-overflow-tooltip="true" prop="updateUser" label="更新人" />
      <el-table-column v-if="columns.visible('updateTime')" :show-overflow-tooltip="true" prop="updateTime" label="更新时间">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.updateTime) }}</span>
        </template>
      </el-table-column>
    </el-table>
    <!--分页组件-->
    <pagination />
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import crudCountryCode from '@/api/postRecord/countryCode'
import crudOperation from '@crud/CRUD.operation'
import rrOperation from '@crud/RR.operation'
import CRUD, { presenter, header, form, crud } from '@crud/crud'
import pagination from '@crud/Pagination'

const defaultCrud = CRUD({ title: '国家代码表', url: 'api/countryCode', sort: ['createTime,asc'], crudMethod: { ...crudCountryCode }})
const defaultForm = { id: null, countryCode2: null, countryCode3: null, countryCodeNum: null, countryNameCh: null, countryShortName: null, countryNameEn: null }
export default {
  name: 'CountryCode',
  components: {
    crudOperation,
    pagination,
    rrOperation
  },
  mixins: [presenter(defaultCrud), header(), form(defaultForm), crud()],
  data() {
    return {
      permission: {
        add: ['admin', 'countryCode:add'],
        edit: ['admin', 'countryCode:edit'],
        del: ['admin', 'countryCode:del']
      },
      rules: {
        countryCode2: [
          { required: true, message: '请输入两字母代码', trigger: 'blur' },
          { min: 2, max: 2, message: '两字母代码限制 2 个字符', trigger: 'blur' }
        ],
        countryCode3: [
          { required: true, message: '请输入三字母代码', trigger: 'blur' },
          { min: 3, max: 3, message: '三字母代码限制 3 个字符', trigger: 'blur' }
        ],
        countryCodeNum: [
          { required: true, message: '请输入数字代码', trigger: 'blur' }
        ],
        countryNameCh: [
          { required: true, message: '请输入中文简称', trigger: 'blur' }
        ],
        countryShortName: [
          { required: true, message: '请输入英文简称', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    ...mapGetters([
      'countryCodeUploadApi'
    ])
  },
  methods: {
    beforeUpload(file) {
      // console.log(file)
      if (file.name.split('.')[1] !== 'xls' && file.name.split('.')[1] !== 'xlsx') {
        this.$notify({
          title: '错误',
          dangerouslyUseHTMLString: true,
          message: '<strong style="color: red">只允许上传xls或者xlsx格式文件</strong>',
          type: 'error'
        })
      }
    },
    // 监听上传成功的钩子，执行上传成功后，需要执行的操作
    uploadSuccess(response, file, fileList) {
      this.crud.notify('上传成功', CRUD.NOTIFICATION_TYPE.SUCCESS)
      this.crud.toQuery()
    },
    // 监听上传失败的钩子，执行上传失败后，需要执行的操作
    uploadError(err, file, fileList) {
      // console.log(JSON.parse(err.message))
      this.$notify({
        title: JSON.parse(err.message).message,
        type: 'error'
      })
    }
  }
}
</script>

<style>
  .el-upload {
    padding-left: 5px;
  }
</style>
